<template>
  <div class="wrapper">
    <div class="content">
      <div class="person">
        <img src="../assets/bgcolor.png" class="header_img" alt="" />
        <!-- 头部 -->
        <div class="top-box">
          <div class="tab">
            <div class="info" @click="jump">
              <section class="login">
                <div class="avatar">
                  <img :src="userInfo.avatar" class="user-logo" />
                  <img
                    src="../assets/皇冠-2 拷贝@2x.ca9087bc.png"
                    class="huangguan"
                    alt=""
                  />
                </div>
                <div class="extra">
                  <p class="name">
                    <span>{{ userInfo.nickname }}</span>
                    <img src="../assets/下载.png" class="vip-logo" />
                  </p>
                  <p class="edit"></p>
                </div>
              </section>
            </div>
            <div class="mine">
              <div class="mine-item my-study">
                <p class="count">0</p>
                <p class="name">我的特色课</p>
                <p class="note">已购特色课程的学习</p>
              </div>
              <div class="mine-item my-plan">
                <p class="count">0</p>
                <p class="name">一对一辅导</p>
                <p class="note">我的一对一老师辅导</p>
              </div>
              <div class="mine-item my-period">
                <p class="count">0.00</p>
                <p class="name">剩余学习币</p>
                <p class="note">查看剩余学习币</p>
              </div>
            </div>
            <div class="to-set">
              <span>去约课</span>
            </div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="to-share">
          <div class="boxes">
            <div class="box" @click="show = true">
              <img
                src=""
              />
              <div>
                <p class="big">邀请好友注册APP，享多重好礼</p>
                <p class="sub">限时特惠，多邀多得</p>
              </div>
              <div>
                <img src="../assets/img/next.png" class="vip-logo" />
              </div>
            </div>
          </div>
        </div>
        <ul class="menu-box">
          <li>
            <p class="title">课程相关</p>
            <div class="item-box">
              <div class="item" @click="attention">
                <img
                  src=""
                  class="icon-teacher"
                />
                <p>关注的老师</p>
              </div>
              <div class="item" @click="collect">
                <img
                  src=""
                  class="icon-collect"
                />
                <p>我的收藏</p>
              </div>
            </div>
          </li>
          <li>
            <p class="title">订单相关</p>
            <div class="item-box">
              <div class="item" @click="order">
                <img
                  src=""
                  class="icon-order"
                />
                <p>课程订单</p>
              </div>
              <div class="item">
                <img
                  src=""
                  class="icon-order"
                />
                <p>会员订单</p>
              </div>
              <div class="item">
                <img
                  src=""
                  class="icon-order"
                />
                <p>约课订单</p>
              </div>
            </div>
          </li>
          <li>
            <p class="title">我的账户</p>
            <div class="item-box">
              <div class="item">
                <img
                  src=""
                  class="icon-coupon"
                />
                <p>优惠券</p>
                <span></span>
              </div>
              <div class="item">
                <img
                  src=""
                  class="icon-card"
                />
                <p>学习卡</p>
              </div>
              <div class="item">
                <img
                  src=""
                  class="icon-vip"
                />
                <p>会员</p>
              </div>
            </div>
          </li>
          <li>
            <p class="title">自助服务</p>
            <div class="item-box">
              <div class="item">
                <img
                  src=""
                  class="icon-news"
                />
                <p>我的消息</p>
                <span></span>
              </div>
              <div class="item">
                <img
                  src=""
                  class="icon-mail"
                />
                <p>意见反馈</p>
              </div>
              <div class="item">
                <img
                  src=""
                  class="icon-custom"
                />
                <p>在线客服</p>
              </div>
              <div class="item" @click="shezhi">
                <img
                  src=""
                  class="icon-custom"
                />
                <p>设置</p>
              </div>
            </div>
          </li>
        </ul>
        <!---->
      </div>
      <van-overlay :show="show" @click="show = false">
        <div class="wrappers">
          <img class="imgs" src="../assets/bigphoto.png" alt="" />
        </div>
      </van-overlay>
    </div>
  </div>
</template>
<script>
import { lzuserInfo } from "../utils/http";
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      show: false,
      userInfo: {},
    };
  },
  mounted() {
    this.getuserinfo();
  },
  methods: {
      async getuserinfo() {
      const res = await lzuserInfo();
      console.log(res)
      this.userInfo = res;
    },
    jump() {
      this.$router.push("/personal");
    },
    attention() {
      this.$router.push("/attention");
    },
    collect() {
      console.log(1);
      this.$router.push("/collects ");
    },
    order() {
      this.$router.push("/order");
    },
    shezhi(){
      this.$router.push('/shezhi')
    }
  },
  computed: {},
  watch: {},
  created() {},
};
</script>

<style scoped>
.wrappers {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.imgs {
  width: 80%;
  height: 80%;
}
.header_img {
  width: 200%;
  height: 150px;
  position: fixed;
  top: 0;
  left: -169px;
  right: 0;
}
.top-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.tab {
  width: 90%;
  background: #fff;
  border-radius: 5px;
  margin-top: 20px;
}
.tab .info {
  padding: 10px;
}
.login {
  display: flex;
  align-items: center;
}
.extra {
  margin-left: 5px;
}
.extra .name {
  display: flex;
  align-items: center;
}
.user-logo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #ddd;
}
.vip-logo {
  width: 20px;
  height: 20px;
}
.mine {
  width: 100%;
  display: flex;
  text-align: center;
  justify-content: space-around;
}
.mine-item {
  width: 33.33%;
  height: 100%;
  text-align: center;
}
.mine-item .count {
  color: orange;
  font-size: 20px;
}
.mine-item .name {
  margin-top: 5px;
}
.mine-item .note {
  color: #ccc;
  margin-top: 5px;
}
.to-set {
  width: 50px;
  height: 20px;
  position: absolute;
  top: 45px;
  right: 18px;
  background: orange;
  border-radius: 5px 0 0 5px;
  color: #fff;
  text-align: center;
  line-height: 20px;
}
/* 身体 */
.to-share {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
}
.to-share .boxes {
  width: 90%;
  height: 40px;
  background: #ff7f00;
  border-radius: 30px 30px 30px 30px;
}
.boxes .box img {
  width: 30px;
  height: 30px;
}
.to-share .boxes .box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #fff;
  height: 40px;
}
/* 底部 */
.menu-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.menu-box li {
  width: 90%;
  border-bottom: 1px solid #ccc;
}
.menu-box li .item-box {
  display: flex;
  height: 75px;
  align-items: center;
}
.menu-box li .item-box .item {
  display: flex;
  width: 25%;
  flex-direction: column;
  align-items: center;
}
.menu-box li .title {
  font-size: 15px;
  margin-top: 20px;
}
.menu-box li .item-box img {
  width: 30px;
  height: 30px;
}
.menu-box li .item-box p {
  margin-top: 5px;
}
.huangguan {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 67px;
  top: 23px;
}
</style>
